<template>
    <el-aside :width="isCollapse ? '64px' : '200px'" style="height: 100vh; transition: width 0.3s; overflow: hidden;">
        <h5 class="mb-2" v-if="!isCollapse">芒果测试平台</h5>
        <el-menu router unique-opened :collapse="isCollapse" :collapse-transition="false">
            <el-sub-menu index="/dashboard/home">
                <template #title>
                    <el-icon>
                        <Guide />
                    </el-icon>
                    <span>首页</span>
                </template>
            </el-sub-menu>

            <el-sub-menu index="2">
                <template #title>
                    <el-icon>
                        <Search />
                    </el-icon>
                    <span>UI自动化</span>
                </template>
                <!-- 填入路径 -->
                <el-menu-item index="/dashboard/UIautomation">
                    <span>UI自动化</span>
                </el-menu-item>

                <el-menu-item index="/dashboard/ReportView">
                    <span>测试报告</span>
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
                <template #title>
                    <el-icon>
                        <Position />
                    </el-icon>
                    <span>接口自动化</span>
                </template>
                <!-- 填入路径 -->
                 <el-menu-item index="/dashboard/ApiView">
                    <span>测试用例</span>
                </el-menu-item>
                <el-menu-item index="/dashboard/ApiReportView">
                    <span>测试报告</span>
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
                <template #title>
                    <el-icon>
                        <Bicycle />
                    </el-icon>
                    <span>单元自动化</span>
                </template>
                <!-- 填入路径 -->
            </el-sub-menu>

            <el-sub-menu index="5">
                <template #title>
                    <el-icon>
                        <School />
                    </el-icon>
                    <span>测试报告</span>
                </template>
                <!-- 填入路径 -->
            </el-sub-menu>

            <el-sub-menu index="6">
                <template #title>
                    <el-icon>
                        <Shop />
                    </el-icon>
                    <span>设备中心</span>
                </template>
                <!-- 填入路径 -->

            </el-sub-menu>

            <el-sub-menu index="7">
                <template #title>
                    <el-icon>
                        <LocationFilled />
                    </el-icon>
                    <span>测试配置</span>
                </template>
                <!-- 填入路径 -->
            </el-sub-menu>

            <el-sub-menu index="8">
                <template #title>
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <span>定时任务</span>
                </template>
            </el-sub-menu>

            <el-sub-menu index="9">
                <template #title>
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <span>数据库</span>
                </template>
                <el-menu-item index="/dashboard/SqlStore">
                    <span>慢查询分析</span>
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="10">
                <template #title>
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <span>系统管理</span>
                </template>
                <el-menu-item index="/dashboard/users">
                    <span>用户管理</span>
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="11">
                <template #title>
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <span>帮助</span>
                </template>
                <el-menu-item index="/dashboard/SecretView">
                    <span>秘钥管理</span>
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="12">
                <template #title>
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <span>AI大模型</span>
                </template>
                <el-menu-item index="/dashboard/AiCaseView">
                    <span>DeepSeek</span>
                </el-menu-item>
            </el-sub-menu>

        </el-menu>
    </el-aside>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Search, Guide, Shop, LocationFilled, School, HomeFilled, Position, Bicycle } from '@element-plus/icons-vue'
import { isCollapse } from './isCollapse';
const message = ref('Hello, Vue 3!');
onMounted(() => {
    // Your code here
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>
<style>
.el-menu {
    border-right: none !important;
}

.el-menu--collapse {
    width: 64px !important;
}

.el-menu:not(.el-menu--collapse) {
    width: 200px !important;
}
</style>